<template>
<div class="addgood undraggablebox">
	<div class="addBtn">
		<el-button size="medium" icon="el-icon-plus" @click="showdialogHandle" class="undraggablebox">添加商品</el-button>
	</div>
	<div class="addItembox" v-show="this.goodsList.length">
		<div class="addItem-tip">拖动下方商品信息行可以调换商品顺序</div>
		<div class="addItemTable">
			<table>
				<thead class="thead-dark">
					<tr>
						<th width="226">商品名称</th>
						<th width="70">商品ID</th>
						<th width="65">商品状态</th>
						<th width="50">操作</th>
					</tr>
				</thead>
				<draggable v-model="goodsList" tag="tbody" @change='allow'>
					<tr v-for="(item,idx) in goodsList" :key="idx">
						<td>{{ item.name }}</td>
						<td>{{ item.id }}</td>
						<td>{{ item.goodsState }}</td>
						<td><el-button size="mini" type="text" @click.stop="delRowHandle(item.id)">删除</el-button></td>
					</tr>
				</draggable>
			</table>
		</div>
	</div>
	<div class="addItem-tip">
      最多可以添加20个商品
    </div>
	<!--  @close="dialogHandle" -->
	<el-dialog title="添加商品" :width="'90%'" :visible.sync="dialogTableVisible" @close="dialogHandle" :modal-append-to-body="false" class="tbdialog undraggablebox">
		
		<div class="search-row">
			<el-row>
				<el-col :span="12"><el-input v-model.trim="searchgoods" placeholder="请输入商品名称"></el-input></el-col>
				<el-col :span="2" style="margin-left: 20px"><el-button type="primary" size="small" @click="searchKeyWord">查询</el-button></el-col>
			</el-row>
		</div>
		<!-- selection-change -->
		<el-table ref="multipleTable" :data="gridData" :header-cell-style="{background:'#eef1f6',color:'#606266'}" @select-all="changeFun" @selection-change="changeFun" :row-key="(row)=>{ return row.id}">
			<el-table-column type="selection" width="55" :reserve-selection="true" ></el-table-column>
			<el-table-column property="id" label="商品ID" width="100"></el-table-column>
			<el-table-column property="name" label="商品名称" width="450"></el-table-column>
			<el-table-column property="currentPrice" label="价格"></el-table-column>
			<el-table-column property="originalPrice" label="划线价"></el-table-column>
			<el-table-column property="goodsState" label="商品状态"></el-table-column>
			<el-table-column property="effectiveTime" label="上架时间"></el-table-column>
		</el-table>
		<div class="pagination">
			<el-row type="flex" class="row-bg" justify="space-between">
				<el-col :span="12">
					<div class="selgoodscouts">共{{total}}个商品，已选择{{this.checkBoxData.length}}个商品<span v-show="this.checkBoxData.length >19">(最多选择20个商品，请删除后再添加其余商品)</span></div>
				</el-col>
				<el-col :span="12" style="text-align: right;">
					<el-pagination
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page.sync="currentPage"
						:page-size="20"
						layout="prev, pager, next, jumper"
						:total="total">
					</el-pagination>
				</el-col>
			</el-row>
		</div>

		<div slot="footer" class="dialog-footer">
			<el-button type="primary" size="small" @click.stop="getData" :disabled="this.checkBoxData.length > 20">确 定</el-button>
		</div>
	</el-dialog>
</div>
</template>

<script>
import draggable from 'vuedraggable'
import {get,post} from '@/tools/http';
import {undraggable,filterID} from '@/tools/util'
export default {
	components: {draggable},
	data(){
		return {
			searchgoods: '',
			gridData: [],
			currentPage: 1,
			total: 0,
			checkBoxData: [],    //多选框选择的值
			dialogTableVisible: false,
			goodsList: this.selgoods,
		}
	},
	props:{
		selgoods: Array
	},
	mounted(){
		undraggable();
	},
	methods:{
		async getItem(start, keyword){
			let goodsId = "";
			if(this.selgoods.length) {
				goodsId = (filterID(this.selgoods)).join(',');
			}
			let params = {
				start: start,
				length: 20,
				key: keyword,
				firstIds: goodsId,//置顶商品ID
				productIds: "",//展示商品ID
			}
			let res = await this.$store.dispatch("listGoods", params);
			this.total = res.total;
			this.gridData = res.list;
			let that = this;
			this.$nextTick(() => {
				setTimeout(() => {
					// this.$refs.multipleTable.clearSelection();
					this.goodsList.forEach(item =>{
						this.gridData.forEach(listitem => {
							if (item.id == listitem.id) {
								that.$refs.multipleTable.toggleRowSelection(listitem, true)
							}
						})
					})
　　　　		}, 0)
			})
		},
		async handleSizeChange(val) {
			await this.getItem(val, this.searchgoods);
		},
		async handleCurrentChange(val) {
			this.getItem(val, this.searchgoods);
		},
		async searchKeyWord(){
			await this.getItem(1, this.searchgoods);
		},
		changeFun(rows) {
			this.checkBoxData = rows;
		},
		async showdialogHandle(){
			this.currentPage = 1;
			this.searchgoods = "";
			this.dialogTableVisible = true;
			this.checkBoxData = this.selgoods;
			this.goodsList = this.selgoods;
			
			await this.getItem(1, this.searchgoods);
			this.$store.commit("setDialogTableVisible", true);
		},
		getData(){
			if(this.checkBoxData.length > 20) return ;
			this.dialogTableVisible = false;
			this.goodsList = this.checkBoxData;
			this.$emit("childgoodsChange", this.checkBoxData);
			this.$store.commit("setDialogTableVisible", false);
		},
		delRowHandle(id) {//小表格删除
			let arr;
			this.goodsList.forEach(item => {
				if(item.id == id){
					this.goodsList.splice(0,1);
					arr = this.goodsList;
				}
			})
			this.$emit("childgoodsChange", arr);
			this.checkBoxData = arr;
		},
		dialogHandle(){
			this.$store.commit("setDialogTableVisible", false);
			this.$nextTick(() => {
				setTimeout(() => {
					this.$refs.multipleTable.clearSelection();
　　　　		}, 0)
			})
		},
		allow(evt) {
			this.$emit("childgoodsChange", this.goodsList);
		},
	},
	watch: {
		selgoods(val){
			this.goodsList = val
		}
	}
}
</script>
<style lang="less" scoped>
@import "../../../../static/css/style.less";
</style>

